<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>VDIRECTIVE自定义指令</h1>
	<hr></hr>
	<div id="app">
		<div v-zhangfeng="color">{{number}}</div>
		<p><button v-on:click="add" >Add</button> </p>
	</div>
	
	<script type="text/javascript">
		
		/**
		*自定义指令有五个声明周期（也叫钩子函数），分别是bind，inserted，update，componentUpdated，unbind
		* 1：bind
		*/
	
		/* Vue.directive('zhangfeng',function(el,binding){
			console.log(el);
			console.log(binding);
			el.style="colorL:"+binding.value;
		}); */
		
		Vue.directive('zhangfeng',{
			
			bind:function(){//被绑定
				console.log('1- bind');
			},
			inserted:function(){//被绑定
				console.log('2-inserted');
			},
			update:function(){//被绑定
				console.log('3-update');
			},
			componentUpdated:function(){//被绑定
				console.log('4-componentUpdated');
			},
			unbind:function(){//被绑定
				console.log('5-unbind');
			}
			
		});
	
		var app = new Vue({
			
			el:'#app',
			data:{
				number:1,
				color:'blue'
			},
			methods:{
				add:function(){
					this.number++;
				} 
				
			}
		});
	</script>
</body>
</html>